<%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8" %> 
<!doctype html>
<html>
<head lang="en">
  <title>幼儿监护系统</title>
  <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="icon" type="image/png" href="assets/i/favicon.png">
    <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
    <link rel="stylesheet" href="/yejhxt/assets/css/amazeui.min.css" />
    <link rel="stylesheet" href="/yejhxt/assets/css/admin.css">
     <link rel="stylesheet" href="/yejhxt/assets/css/custom.css"/>
     <link rel="stylesheet" href="/yejhxt/assets/css/amazeui.datetimepicker.css"/>
  
  

<script src="/yejhxt/assets/js/jquery.min.js"></script>
 <script src="/yejhxt/assets/js/js.KinerCode.js"></script>

<script src="/yejhxt/assets/js/custom.js"></script>
<script src="/yejhxt/assets/js/amazeui.min.js"></script>
 <script src="/yejhxt/assets/js/amazeui.datetimepicker.js"></script>
  <script src="http://api.map.baidu.com/api?v=2.0&ak=59kX1u1V6uWpfqLGmjGdlGQZ" type="text/javascript"></script> 
<script type="text/javascript"
	src="http://api.map.baidu.com/library/MarkerTool/1.2/src/MarkerTool_min.js"></script>


<style>
#beginDate {
	cursor: pointer;
	background-color: #FFFFFF;
}

#endDate {
	cursor: pointer;
	background-color: #FFFFFF;
}
</style>

<meta name="description" content="devicemanager">
</head>

<body>
	<%@ include file="../commoms/sysHead.txt"%>
	<div class="admin-content">
		<div class="admin-content-body">
			<div class="am-cf am-padding am-padding-bottom-0">
				<div class="am-fl am-cf">
					<strong class="am-text-primary am-text-lg">表格</strong> / <small>Table</small>
				</div>
			</div>

			<hr>

			<div class="am-g">
				<div class="am-u-sm-12 am-u-md-6 am-u-lg-5">
					
				</div>
				<div class="am-u-sm-12 am-u-md-3 am-u-lg-7">
					<div class="am-form-group">
						<form action="/yejhxt/api/sysuser/getmessage.do"
							class="am-form am-form-inline" id="condition">
							<div class="am-form-group am-form-icon am-input-group-sm">
								<i class="am-icon-calendar"></i> <input type="text"
									id="beginDate" name="dateBegin" class="am-form-field"
									placeholder="开始时间" style="width: 90%" required readonly>
							</div>
							<div class="am-form-group am-form-icon am-input-group-sm">
								<i class="am-icon-calendar"></i> <input type="text" id="endDate"
									name="dateEnd" class="am-form-field" placeholder="结束时间"
									style="width: 90%" required readonly>
							</div>
							<div class="am-input-group am-input-group-sm">
								<input type="text" class="am-form-field" style="width: 90%"
									id="devicecode" name="devicecode" placeholder="设备ID" required> <span
									class="am-input-group-btn">
									<button class="am-btn am-btn-default" id="submit" type="submit">搜索</button>
								</span>
							</div>

						</form>
					</div>

				</div>
			</div>
			<div class="am-g">
				<div class="am-u-sm-12">
					<form class="am-form">
						<table class="am-table am-table-striped am-table-hover table-main">
							<thead>
								<tr>
								
									<th class="table-id">ID</th>
									<th class="table-title">设备</th>
									<th class="table-author am-hide-sm-only">经度</th>
									<th class="table-author am-hide-sm-only">纬度</th>
									<th class="table-author am-hide-sm-only">地址</th>
									<th class="table-date am-hide-sm-only">发生时间</th>
									
								</tr>
							</thead>

							<tbody id="pagecontainer">

							</tbody>
						</table>

						<hr />
					</form>
				</div>

			</div>
		</div>
	</div>
	</div>

	<script type="text/javascript">

	var geoc = new BMap.Geocoder();
var ldata=null;
var device=null;

$pagecontainer=$('#pagecontainer');

var timebeginpicker = $('#endDate').datetimepicker({
	  format: 'yyyy-mm-dd hh:ii',
	    autoclose :true,
	  
}
		);
var timeendpicker = $('#beginDate').datetimepicker({
	   format: 'yyyy-mm-dd hh:ii',
	    autoclose :true,
}
);
var devicecode='<%=request.getParameter("devicecode")%>';

		if (devicecode != 'null') {
			$('#devicecode').val(devicecode);
		}

		var $form = $('#condition');
		setFormValidate($form, function(data) {

			$form.on("submit", function(e) {
				return false;
			});
			if (data.code == '200') {
				device = data.result;
				
				if(typeof(device)=='undefined')
				myAlert("提示","没有信息")
				else
					{
					ldata = device.message;
				drawDiffStatusContent($pagecontainer, ldata)
					}
			}
			if (data.code == '406') {
				myAlert('提示', '暂无信息');
			}
			if (data.code == '403') {
				myAlert('提示', '重新登陆', function() {
					window.location.href = '/yejhxt/Login.jsp';
				});
			}
		});

		$("form").submit(function(e) {

			return false;
		});
		

	
	
		function drawDiffStatusContent($pagecontainer, data) {
			var temp = '';
			var address;
			$.each(data,function(i, item) {
				geoc.getLocation(new BMap.Point(item.longtitude,item.latitude),function(rs) {
													var addComp = rs.addressComponents;
													address = addComp.city
															+ " "
															+ addComp.district
															+ "  "
															+ addComp.street
															+ "  "
															+ addComp.streetNumber;
													
													$pagecontainer
															.append(' <tr><td>'
																	+ (i + 1)
																	+ '</td><td>'
																	+ device.devicename
																	+ '</td><td>'
													
																	+ item.longtitude
																	+ ' </td><td>'
																	+ item.latitude

																	+ '</td><td>'
																	+ address
																	+ '</td> <td>'
																	+ item.happendtime
																	+ '</td>'
																	+ '</tr>');
												});

							});

		}
	</script>
</body>
</html>